<template>
  <div id="app">
    <!-- 头部  -->
    <div id="nav">
          <div class="nav-show">
              <div class="nav-show-left">
                  <a href="/">
                      <img src="/static/img/linkphp.png" />
                  </a>
              </div>
              <div class="nav-show-right" v-if="isLogin === false">
                  <a class="avatar" href="javascript:;" v-on:click="login">
                      <img src="/static/img/photo.png">
                      <cite>登入/注册</cite>
                  </a>
              </div>
              <div class="nav-show-right" v-else>
                  <a class="avatar">
                      <img src="/static/img/photo.png">
                      <cite>{{ username }}</cite>
                      <ctie v-on:click="logout"> 退出</ctie>
                  </a>
              </div>
              <div class="nav-show-middle">
                  <ul class="layui-nav" layui-filter="linkphpnav">
                      <li class="layui-nav-item"><a href="javascript:;" v-on:click="forum">社区</a></li>
                      <li class="layui-nav-item"><a href="javascript:;" v-on:click="vip">VIP</a></li>
                      <li class="layui-nav-item"><a href="javascript:;" v-on:click="library">下载</a></li>
                      <li class="layui-nav-item"><a href="javascript:;" v-on:click="blog">博客</a></li>
                      <li class="layui-nav-item">
                          <a href="javascript:;">个人中心</a>
                          <dl class="layui-nav-child">
                              <dd><a href="/user">设置</a></dd>
                              <dd><a href="javascript:;" v-on:click="UserPost">我的帖子</a></dd>
                              <dd><a href="/user">我的收藏</a></dd>
                          </dl>
                      </li>
                  </ul>
              </div>
          </div>
      </div>
    <router-view/>
    <!-- 底部  -->
    <div id="footer">
          <div class="footer-content">
              <aside class="footer-content-item recent_entries">
                  <h3 class="footer-content-item-title">近期文章</h3>
                  <ul>
                      <li v-for="item in Items">
                          <a href="#">{{ item.title }}</a>
                      </li>
                  </ul>
              </aside>
              <aside class="footer-content-item links">
                  <h3 class="footer-content-item-title">我的基友</h3>
                  <ul></ul>
              </aside>
              <aside class="footer-content-item helps">
                  <div class="helps-box">
                      <h3 class="footer-content-item-title last-box">WIKI教程中心</h3>
                      <ul>
                          <li><a href="#">框架教程</a></li>
                          <li><a href="#">类库教程</a></li>
                          <li><a href="#">Api接口</a></li>
                          <li><a href="#">快速入门</a></li>
                      </ul>
                  </div>
                  <div class="helps-box">
                      <h3 class="footer-content-item-title last-box">热门标签</h3>
                      <ul>
                          <li class="tags">
                              <a href="#" class="tars-info">composer入门</a>
                          </li>
                          <li class="tags">
                              <a href="#" class="tars-info">类库教程</a>
                          </li>
                          <li class="tags">
                              <a href="#" class="tars-info">微信接口开发</a>
                          </li>
                          <li class="tags">
                              <a href="#" class="tars-info">快速入门</a>
                          </li>
                          <li class="tags">
                              <a href="#" class="tars-info">开源框架</a>
                          </li>
                          <li class="tags">
                              <a href="#" class="tars-info">linkphp框架</a>
                          </li>
                          <li class="tags">
                              <a href="#" class="tars-info">mvc</a>
                          </li>
                          <li class="tags">
                              <a href="#" class="tars-info">快速入门</a>
                          </li>
                          <li class="tags">
                              <a href="#" class="tars-info">框架教程</a>
                          </li>
                          <li class="tags">
                              <a href="#" class="tars-info">微信接口开发</a>
                          </li>
                          <li class="tags">
                              <a href="#" class="tars-info">Api接口</a>
                          </li>
                          <li class="tags">
                              <a href="#" class="tars-info">快速入门</a>
                          </li>
                      </ul>
                  </div>
              </aside>
          </div>
          <div class="footer-content-pro">
              LinkPHP说明: php mvc-api 开源框架
          </div>
      </div>
  </div>
</template>

<script>
import request from './link/request.js'
export default {
  name: 'App',
  data () {
    return {
      Items: {},
      username: '',
      isLogin: false
    }
  },
  mounted () {
    this.isLogins()
    this.getThisData()
  },
  methods: {
    getThisData () {
      let that = this
      request.get('/index.php/main/blog/getBlogList')
        .then(function (response) {
          that.Items = response
        })
      layui.use(['element'], function () {
        let element = layui.element
        element.on('tab(linkphpnav)', function () {
        })
      })
    },
    isLogins () {
      let that = this
      request.get('/index.php/main/auth/isLogin')
        .then(function (response) {
          if (response.code === 2) {
            return false
          } else {
            that.username = response.data.username
            that.isLogin = true
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    logout () {
      let that = this
      window.localStorage.removeItem('token')
      layer.msg('退出成功', {icon: 1})
      that.reload('index')
    },
    index () {
      this.router.push('/index')
    },
    forum () {
      this.router.push('/forum')
    },
    vip () {
      this.router.push('/vip')
    },
    library () {
      this.router.push('/library')
    },
    blog () {
      this.router.push('/blog')
    },
    login () {
      this.router.push('/login')
    },
    UserPost () {
      this.redirect('user/post')
    }
  }
}
</script>

<style>
@import "assets/css/app.css";
</style>
